<!-- 脚本标签：TS 交互 -->
<script setup lang="ts">
// 调用后台接口(API)，完成测试
import {ceshi,ceshiAdd,ceshiDeleteById,ceshiUpdateNameById} from '@/api/ceshi.ts'
import type { id } from 'element-plus/es/locale/index.mjs';
import { constants } from 'perf_hooks';
import { ref } from 'vue'

// 测试人员数据模型
const ceshiPersonModel = ref({
    id:'',
    name:'',
    age:'',
    createTime:'',
    updateTime:''
})


// 清空ceshiPersonModel中的数据
function clearCeshiPersonModel() {
  ceshiPersonModel.value.id = '';
  ceshiPersonModel.value.name = '';
  ceshiPersonModel.value.age = '';
  ceshiPersonModel.value.createTime = '';
  ceshiPersonModel.value.updateTime = '';
}
 // 测试添加人员
 async function ceshiAddPerson(){
    try{
        // 封装数据
        ceshiPersonModel.value.name = '张三';
        ceshiPersonModel.value.age = '18';
        console.log('封装后的数据:', ceshiPersonModel); // 添加调试输出
        const response = await ceshiAdd(ceshiPersonModel.value);
        console.log('接口返回的数据',response)
    }catch(error){
        console.error('请求失败:', error);
    }
 }

 // 测试根据id删除
 async function testDeleteById(){
    try{
        const response = await ceshiDeleteById(6523)
        console.log('删除成功',response)
    }catch(error){
        console.error("删除失败",error)
    }
 }

// 测试所有人员信息查询
 async function ceshiQueryAll(){
    try{
        const response = await ceshi();
        console.log('接口返回的数据',response)
    }catch(error){
        console.error('请求失败:', error);
    }
 }

 // 测试更新对应的人员名称（传入json ---> id + name）
async function testUpdateNameById() {
    try{
        const response = await ceshiUpdateNameById({id:6526,name:'小幻'})
    }catch(error){
        console.error('更新失败！',error)
    }
    
}



</script>


<!-- ************************************************************************************************************************************************************* -->
<!-- ************************************************************************************************************************************************************* -->

<!-- html 结构 -->
<template>
        <div class="app">
        <h1>您好呀！</h1>
        <button @click="ceshiQueryAll">点我测试</button>
        <button @click="ceshiAddPerson">点我添加</button>
        <button @click="testDeleteById">点我删除</button>
        <button @click="testUpdateNameById">点我修改</button>
    </div>
</template>


<!-- ************************************************************************************************************************************************************* -->
 <!-- ************************************************************************************************************************************************************* -->
<!-- 样式 -->
<style scoped>

</style>


